<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      class Clock {
        h = null;
        constructor(template) {
          this.template = template;
          // this.h = null;
          // return this;
        }
        render() {
          const d = new Date();
          const h = d.getHours();
          const m = d.getMinutes();
          const s = d.getSeconds();
          // const template = "h:m:s";
          let sh = this.template
            .replace("h", h)
            .replace("m", m)
            .replace("s", s);
          console.log(sh);
        }
        start() {
          this.h = setInterval(() => {
            this.render();
          }, 1000);
        }
        stop() {
          clearInterval(this.h);
        }
      }

      // 代码复用
      class MyClock extends Clock {
        start(ms) {
          this.h = setInterval(() => {
            this.render();
          }, ms);
        }
      }
      const c = new MyClock("h:m:s");
      c.start(3000);

      // const c = new Clock("h:m:s"); // constructor()
      // c->constructor return this->this.template
      // c.render();
      // c.start();
      // c.stop();
    </script>
  </body>
</html>
